<template>
    <div class="product-container">
        <ul class="product-list">
            <li class="product-item" v-for="(item, k) in productList" :key="k">
                <div class="product-image">
                    <a :href="`/product-detail?id=${item.id}`">
                        <img src="http://pro99003c31.pic5.ysjianzhan.cn/upload/T18489.jpg" alt="产品图片" />
                    </a>
                </div>
                <div class="product-specs">
                    <div class="spec-item">
                        <span class="spec-label">货号:</span>
                        <span class="spec-value">{{ item.id }}</span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">品名:</span>
                        <span class="spec-value">{{ item.name }}</span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">英文品名:</span>
                        <span class="spec-value">{{ item.engName }}</span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">CAS#:</span>
                        <span class="spec-value">{{ item.CAS }}</span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">分子式:</span>
                        <span class="spec-value">{{ item.type }}</span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">分子量:</span>
                        <span class="spec-value">{{ item.num }}</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { ref } from 'vue'

let productList = ref([
    {
        id: 'L41929',
        name: '乐伐',
        engName: 'Lenva 68',
        CAS: '15568-85-1',
        type: 'C8H10',
        num: '186.16',
    },
    {
        id: 'L41929',
        name: '乐伐',
        engName: 'Lenva 68',
        CAS: '15568-85-1',
        type: 'C8H10',
        num: '186.16',
    },
    {
        id: 'L41929',
        name: '乐伐',
        engName: 'Lenva 68',
        CAS: '15568-85-1',
        type: 'C8H10',
        num: '186.16',
    },
    {
        id: 'L41929',
        name: '乐伐',
        engName: 'Lenva 68',
        CAS: '15568-85-1',
        type: 'C8H10',
        num: '186.16',
    },
    {
        id: 'L41929',
        name: '乐伐',
        engName: 'Lenva 68',
        CAS: '15568-85-1',
        type: 'C8H10',
        num: '186.16',
    },
    {
        id: 'L41929',
        name: '乐伐',
        engName: 'Lenva 68',
        CAS: '15568-85-1',
        type: 'C8H10',
        num: '186.16',
    },
])
</script>
<style lang="scss" scoped>
.product-container {
    margin-top: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: rgb(241, 241, 241);
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;
}

.product-item {
    // width: calc(50%);
    flex: 0 0 calc(20% - 16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #ffffff;
}

.product-image {
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid #eee;
    border-radius: 8px;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-specs {
    width: 100%;
    text-align: left;
}

.spec-item {
    font-size: 14px;
    line-height: 1.4;
    color: #666;
    margin-bottom: 5px;
    display: flex;
    align-items: flex-start;
}

.spec-label {
    color: #999;
    margin-right: 5px;
    min-width: 70px; /* 标签固定宽度，保持对齐 */
}

.spec-value {
    color: #333;
    flex: 1;
}

/* 响应式处理 */
@media (max-width: 1200px) {
    .product-item {
        flex: 0 0 calc(50% - 15px); /* 小屏幕每行4个 */
    }
}

@media (max-width: 768px) {
    .product-item {
        flex: 0 0 calc(50% - 14px);
    }
}
</style>
